<template>
  <div>
    <div class="demo-inner-divider">常规 InputNumber</div>
    <div class="input-number" >
      <div>
        <p>默认:</p>
        <e-input-number
          v-model="num1"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>大型:</p>
        <e-input-number
          v-model="num" 
          size="large"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>标准:</p>
        <e-input-number
          v-model="num" 
          size="default"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>中型:</p>
        <e-input-number
          v-model="num2"
          size="middle"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>小型:</p>
        <e-input-number
          v-model="num3"
          size="small"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>
    <div class="input-number" >
      <div>
        <p>可用:</p>
        <e-input-number
          :max="10" 
          :min="1"
          v-model="num4"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>禁用:</p>
        <e-input-number
          v-model="num5"
          disabled
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>只读:</p>
        <e-input-number
          v-model="num6"
          readonly
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div >
        <p>不可编辑:</p>
        <e-input-number
          v-model="num7"
          :editable="false"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>带悬停提示:</p>
        <e-tooltip
          placement="top"
          content="1-10"
        >
          <e-input-number
            :max="10" 
            :min="1"
            v-model="num10"
            style="width: 120px">
          </e-input-number>
        </e-tooltip>
        <span>这里输入规范的提示</span>
      </div>
    </div>

    <div class="demo-inner-divider">格式化展示 InputNumber</div>
    <div class="input-number" >
      <div >
        <p>金额</p>
        <e-input-number
          :max="10000"
          v-model="value1"
          :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => value.replace(/\$\s?|(,*)/g, '')"
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>百分数</p>
        <e-input-number
          v-model="value2"
          :formatter="value => `${value}%`"
          :parser="value => value.replace('%', '')">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
      <div>
        <p>小数</p>
        <e-input-number
          v-model="value3"
          :step="0.2">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>
    <div class="input-number" >
      <div >
        <p>按钮位置</p>
        <e-input-number
          v-model="value4"
          controls-outside
          style="width: 120px">
        </e-input-number>
        <span>这里输入规范的提示</span>
      </div>
    </div>
    <div class="demo-inner-divider">自动重置</div>
    <div class="input-number-wrapper" >
      <div class="explainText">数据清空时自动重置为最小值:<span>属性allow-empty设置为false，min非空</span></div>
      <div class="input-number-example">
        <div>
          <e-input-number
            :max="200" 
            :min="-100"
            :allow-empty="false"
            v-model="num8"
            style="width: 120px"
          >
          </e-input-number>
          <p>这里输入规范的提示</p>
        </div>
        <div>
          <e-input-number
            :max="100" 
            :min="10"
            :allow-empty="false"
            v-model="num9"
            style="width: 120px"
            controls-outside
          >
          </e-input-number>
          <p>这里输入规范的提示</p>
        </div>
      </div>
    </div>

    <div class="demo-inner-divider">input-number结合表单验证</div>
    <div class=" input-number-wrapper">
      <div class="explainText">表单自定义验证器</div>
      <e-form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <e-formItem label="Age" prop="age">
          <e-input-number
            v-model="formValidate.age"
            placeholder="Enter your age"
            style="width: 120px"
            :allow-empty="false"
          ></e-input-number>
        </e-formItem>
        <e-formItem label="Age1" prop="age1">
          <e-input-number
            v-model="formValidate.age1"
            placeholder="Enter your age"
            style="width: 120px"
            :allow-empty="false"
            controls-outside
          ></e-input-number>
        </e-formItem>
        <!-- <e-formItem>
          <e-button
            type="primary"
            @click="handleSubmit('formValidate')"
          >Submit</e-button
          >
          <e-button
            @click="handleReset('formValidate')"
            style="margin-left: 8px"
          >Reset</e-button
          >
        </e-formItem> -->
      </e-form>
    </div>
    <inputNumber-md 
      class="markdown-body">
    </inputNumber-md>
  </div>
</template>
<script>
import inputNumberMd from '../../docs/inputNumber.md';
export default {
  name: 'DemoCheckboxAndRadio',
  components: {
    inputNumberMd
  },
  data () {
    return {
      num: 1,
      num1: 1,
      num2: 1,
      num3: 1,
      num4: 1,
      num5: 1,
      num6: 1,
      num7: 1,
      num8: 5,
      num9: null,
      num10: 1,
      value1: 1000,
      value2: 50,
      value3: 0.8,
      value4: 1,
      formValidate: {
        // name: '',
        age: 1,
        age1:2,
      },
      ruleValidate: {
        age: [{ validator: this.validateAge, trigger: 'change' }],
        age1:[{ validator: this.validateAge1, trigger: 'change' }],
      },
    }
  },
  methods:{
    validateAge (rule, value, callback){
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      // 模拟异步验证效果
      if (!Number.isInteger(value)) {
        callback(new Error('请输入一个有效整数'))
      } else {
        if (value < 18) {
          callback(new Error('年龄必须大于18'))
        }else if(value>50){
          callback(new Error('年龄必须小于50'))
        } else {
          callback()
        }
      }
      // setTimeout(() => {
      //   if (!Number.isInteger(value)) {
      //     callback(new Error('请输入一个有效整数'))
      //   } else {
      //     if (value < 18) {
      //       callback(new Error('年龄必须大于18'))
      //     }else if(value>50){
      //       callback(new Error('年龄必须小于50'))
      //     } else {
      //       callback()
      //     }
      //   }
      // }, 1000)
    },
    validateAge1 (rule, value, callback){
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      // 模拟异步验证效果
      if (!Number.isInteger(value)) {
        callback(new Error('请输入一个有效整数'))
      } else {
        if (value < 5) {
          callback(new Error('年龄必须大于5'))
        }else if(value>10){
          callback(new Error('年龄必须小于10'))
        } else {
          callback()
        }
      }
    },
    // handleSubmit(name) {
    //   this.$refs[name].validate((valid) => {
    //     if (valid) {
    //       this.$Message.success('Success!')
    //     } else {
    //       this.$Message.error('Fail!')
    //     }
    //   })
    // },
    // handleReset(name) {
    //   console.log("name",name)
    //   this.$refs[name].resetFields()
    // },
  }
}
</script>
<style scoped>
.input-number{
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}
.input-number > div{
    margin-right: 50px ;
  }
.input-number p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  margin-bottom: 10px;
}

.input-number span {
  display: flex;
  font-size: 12px;
  color: #999999;
}

/* .input-number-wrapper {
  margin-bottom: 30px;
  .explainText{
    display: flex;
    font-size: 14px;
    color: rgba(98,54,255,1);
    margin: 10px 0px;
  }
  .explainText > span{
    font-size: 14px;
    color:#6F7D96;
    padding-left:10px;
  }
  .input-number-example {
    display: flex;
    > div {
      margin-right: 50px;
      > p {
        color: #999;
      }
    }
  }
} */
.input-number-wrapper .explainText{
    display: flex;
    font-size: 14px;
    color: rgba(98,54,255,1);
    margin: 10px 0px;
  }
  .input-number-wrapper .explainText > span{
    font-size: 14px;
    color:#6F7D96;
    padding-left:10px;
  }

  .input-number-wrapper .input-number-example{
  
  display: flex;
}
.input-number-wrapper .input-number-example >div{
  margin-right: 50px;
}

.input-number-wrapper .input-number-example >div >p{
  color: #999;
}

</style>
